<!--模型图片列表-->
<mxtable>
    <div ref="content" class="CgsTool__content CgsSymbolTool">
        <div class='CgsSymbolTool__top'>
          <div class='CgsMaSymbolToolsearchBar'>
              <input ref="searchInput" class='CgsSymbolTool__searchInput' oninput={searchInputChange}/>
              <div class='CgsSymbolTool__searchButton' onclick={jbFind}></div>
          </div>
        </div>
        <div class='CgsSymbolTool__container CgsModelTool__container'>
          <div each={ jbs } class="CgsModelTool__tool" data-lib={libId} data-id={id} title={"名称:"+ text}>
              <img src={url}>
              <p>{text}</p>
          </div>
        </div>
    </div>

    <script>
      var tag = this;
      tag.index = opts.start || 0;
      tag.imgUrl=CGS_SDK_PATH + '/assets/image/tool/symboltool/unchecked.png';
      tag.jmpSequenceDrawChecked=false;
      tag.map = opts.map;
      tag.map.jmpSequenceDraw = false; // 连续绘制标识
      this.jbs = [];

      tag.on('jbsUpdate', function (jbs) {
        this.update({ jbs: jbs });
      });

      tag.searchInputChange = function(){
        var searchText = tag.refs.searchInput.value;
        if(_.trim(searchText) === ''){
          tag.jbFind();
        }
      }


      //军标图标通过军标名称或ID进行搜索过滤
      //后续考虑加入首字母搜索与全拼搜索
      tag.jbFind = function () {
        let allModels = tag.panel.refs.mxclazz.allModels;
        var searchText = tag.refs.searchInput.value;
        if (_.trim(searchText) === '') {
          // var selected = tag.panel.refs.mxclazz.treeUl.tree('getChecked');
          // var jbs = selected.filter(item=>{
          //   return item.children&&item.children.length==0;
          // });
          tag.trigger('jbsUpdate',allModels);
        }else {
          var jbs = allModels.filter(jb => {
            return String(jb.text).indexOf(searchText) >= 0;
          });
            
          // 使用id搜索
          if(jbs.length === 0){
            jbs = allModels.filter(item=>{
              return item.id.indexOf(searchText)>=0;
            })
          }
          tag.trigger('jbsUpdate', jbs);
        }
      };

      tag.on('mount', function () {
        tag.panel = tag.parent;

        //搜索框回车响应
        $$(tag.refs.searchInput).bind('keydown', function (ev) {
          if (ev.keyCode === 13) {
              tag.jbFind();
          }
        });

        var content = $$(tag.refs.content);
        //点击军标图标的事件，改变图标样式并触发对应的军标绘制
        content.delegate(".CgsModelTool__tool", "click", function (event) {
            let allModels = tag.panel.refs.mxclazz.allModels;
            var id = $$(this).attr("data-id");
            let currentDrawModel = allModels.filter(item=>item.id == id)[0];
            tag.map.modelDrawStatu = true;
            tag.map.currentDrawModel = currentDrawModel;

            var $mapContainer = tag.map.container.children;
            if (tag.map.currentDrawModel) { //开启模型盖章样式
              var symbolPicUrl = event.currentTarget.getElementsByTagName('img')[0].src;
              var url = CGS_SDK_PATH + '/assets/image/mouseIcon/add_normal.png';
              $$($mapContainer[0]).css('cursor', `url(${url}) 8 8,auto`);
              $$($mapContainer[1]).css('cursor', `url(${url}) 8 8,auto`);
            } else {
              $$($mapContainer[0]).css('cursor', '');
              $$($mapContainer[1]).css('cursor', '');
            }

            if ($$(event.currentTarget).hasClass('CgsModelTool__tool_active')) {
              $$(event.currentTarget).removeClass("CgsModelTool__tool_active");
              $$($mapContainer[0]).css('cursor', '');
              $$($mapContainer[1]).css('cursor', '');
              return;
            }

            content.find(".CgsModelTool__tool_active").removeClass("CgsModelTool__tool_active");
            $$(this).addClass("CgsModelTool__tool_active");
        });
      });

    </script>
</mxtable>